import { useRef } from "react";

interface UploadProps {
  children: React.ReactNode;
  multiple?: boolean;
  disabled?: boolean;
  name?: string;
  handleUpload: (files: FileList) => void;
}

const Upload = ({ children, multiple, disabled, name = "file", handleUpload }: UploadProps) => {
  const fileInputRef = useRef<HTMLInputElement>(null);

  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const files = event.target.files
    if (files && files.length > 0) {
      handleUpload(files);
    };
  }

  return <>
    <input
      type="file"
      ref={fileInputRef}
      className="hidden"
      onChange={handleChange}
      multiple={multiple ?? false}
      disabled={disabled ?? false}
      name={name}
    />
    <div onClick={() => fileInputRef.current?.click()}>{children}</div>
  </>;
};

export default Upload;
